@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.DynamicFormsDemo
@model DynamicFormsDemoModel
<div class="row">
    <div class="col-md-12">
        <h3>The form model is:</h3>
        <hr />
        <textarea style="width:100%;height: 320px" disabled>
public List<SelectListItem> CountryList { get; set; } = new List<SelectListItem>
{
    new SelectListItem { Value = "CA", Text = "Canada"},
    new SelectListItem { Value = "US", Text = "USA"},
    new SelectListItem { Value = "UK", Text = "United Kingdom"},
    new SelectListItem { Value = "RU", Text = "Russia"}
};

public enum CarType
{
    Sedan,
    Hatchback,
    StationWagon,
    Coupe
}

public class DetailedModel
{
    [Required]
    [Placeholder("Enter your name...")]
    [Display(Name = "Name")]
    public string Name { get; set; }

    [TextArea(Rows = 4)]
    [Display(Name = "Description")]
    [InputInfoText("Describe Yourself")]
    public string Description { get; set; }

    [Required]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [Display(Name = "Is Active")]
    public bool IsActive { get; set; }

    [Required]
    [Display(Name = "Age")]
    public int Age { get; set; }

    [Required]
    [Display(Name = "My Car Type")]
    public CarType MyCarType { get; set; }

    [Required]
    [AbpRadioButton(Inline = true)]
    [Display(Name = "Your Car Type")]
    public CarType YourCarType { get; set; }

    [DataType(DataType.Date)]
    [Display(Name = "Day")]
    public DateTime Day { get; set; }

    [SelectItems(nameof(CountryList))]
    [Display(Name = "Country")]
    public string Country { get; set; }

    [SelectItems(nameof(CountryList))]
    [Display(Name = "Neighbor Countries")]
    public List<string> NeighborCountries { get; set; }
            
    public DetailedModel()
    {
        Name = "";
        Description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
        IsActive = true;
        Age = 65;
        Day = DateTime.Now;
        MyCarType = CarType.Coupe;
        YourCarType = CarType.Sedan;
        Country = "RU";
        NeighborCountries = new List<string>() { "UK", "CA" };
    }
}
        </textarea>
    </div>
</div>

<abp-component-demo-section title="Detailed Form" view-path="@DynamicFormsDemoViewComponent.ViewPath">
    <abp-dynamic-form abp-model="@Model.MyDetailedModel" submit-button="true" />
</abp-component-demo-section>

<div class="row">
    <div class="col-md-12">
        <h3>The form model is:</h3>
        <hr />
        <textarea style="width:100%;height: 320px" disabled>
public class OrderExampleModel
{
    [DisplayOrder(10005)]
    public string Surname { get; set; }

    //Default 10000
    public string EmailAddress { get; set; }

    [DisplayOrder(10003)]
    public string Name { get; set; }

    [DisplayOrder(9999)]
    public string City { get; set; }
}
        </textarea>
    </div>
</div>

<abp-component-demo-section title="Order Attribute Example" view-path="@DynamicFormsDemoViewComponent.ViewPath">
    <abp-dynamic-form abp-model="@Model.MyOrderExampleModel"/>
</abp-component-demo-section>

<div class="row">
    <div class="col-md-12">
        <h3>The form model is:</h3>
        <hr />
        <textarea style="width:100%;height: 320px" disabled>
public class AttributeExamplesModel
{
    [HiddenInput]
    public string HiddenInput { get; set; }

    [DisabledInput]
    public string DisabledInput { get; set; }

    [ReadOnlyInput]
    public string ReadonlyInput { get; set; }

    [FormControlSize(AbpFormControlSize.Large)]
    public string LargeInput { get; set; }

    [FormControlSize(AbpFormControlSize.Small)]
    public string SmallInput { get; set; }
}
        </textarea>
    </div>
</div>

<abp-component-demo-section title="Attribute Examples" view-path="@DynamicFormsDemoViewComponent.ViewPath">
    <abp-dynamic-form abp-model="@Model.MyAttributeExamplesModel" />
</abp-component-demo-section>

<abp-component-demo-section title="Form Content Placement" view-path="@DynamicFormsDemoViewComponent.ViewPath">
    <div style="color:red">
        First Div!  <br />
        ---------
    </div>

    <abp-dynamic-form abp-model="@Model.MyAttributeExamplesModel" />

    <div style="color:blue">
        ---------  <br />
        Second Div!
    </div>
</abp-component-demo-section>